<template>
	<view class="lyric-container">
		<scroll-view @click="hiden" class="lyric-list" :scroll-top="scrollTop" scroll-y="true" @scroll="scroll">
		    <view class="lyric-row" v-for="(text,key,index) in lrc" :key="index">
				 <!-- #ifdef H5||APP-PLUS -->
				<text :class="{complete:currentTime>=key}">{{text}}{{scrollLyric(index)}}</text>
				 <!-- #endif -->
				 <!-- #ifdef MP-WEIXIN -->
				 <text :class="{complete:currentTime>=key}">{{text}}</text>
				  <!-- #endif -->
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
export default{
	props:{
		lyric:{
			type:[Object,String,Array],
			default:''
		}
	},
	data(){
		return{
		  scrollTop:0,
		  lrc:{},
		  timer:null,
		  currentTime:0,
		  duration:1,
		  allKyes:[],
		  avgpx:0
		}
	},
	created() {
		this.duration = this.$Audio.duration
		this.initLyric(this.lyric)
		this.showScrollLyric()
	},
		computed:{
			...mapState(['themeType'])
		},
	methods:{
		initLyric(lyric){
			let lyricArr=lyric.split('\n')
			let reg=/\[\d*:\d*(\.|:)\d*]/g
			lyricArr.forEach((val,index)=>{
				let timeRegArr=val.match(reg)
				if(!timeRegArr) return
				let content=val.replace(timeRegArr[0],"")
				let t =timeRegArr[0]
				let min=parseInt(t.match(/\[\d*/i).toString().slice(1))
				let sec=parseInt(t.match(/\:\d*/i).toString().slice(1))
				let time = min*60+sec
				this.lrc[time] = content
			})
			this.allKyes=Object.keys(this.lrc)
			this.avgpx=parseInt(this.allKyes.length*40/this.duration)
		},
		showScrollLyric(){
			this.timer=setInterval(()=>{
				if(this.currentTime>=this.duration){
					return clearInterval(this.timer)
				}
				    this.currentTime = this.$Audio.currentTime
			},1000)
		},
		scroll(e){
			// console.log(e)
		},
		scrollLyric(index){
			if(this.currentTime>this.allKyes[index] && this.currentTime < this.allKyes[index+1]){
				this.scrollTop=40*index
			}
		},
		hiden(){
			this.$emit("hidden")
		}
	},
	watch:{
		currentTime(){
			this.scrollTop=this.scrollTop+this.avgpx
		}
	}
}
</script>

<style lang="scss" scoped>
.lyric-container{
	padding: 20rpx;
	/*  #ifdef MP-WEIXIN */
	// margin: 50px auto;
	/*  #endif  */
	height: 600rpx;
	/*  #ifdef APP-PLUS */
	padding-top: 60rpx;
	height: 800rpx;
	/*  #endif  */
	.lyric-list{
		height: 100%;
	  .lyric-row{
	    // touch-action: none;
	  	height: 100rpx;
		text-align: center;
	  	text{
			color: #535355;
		}
	  }
	  .complete{
		  color: red !important;
	  }
	}
}
</style>
